<template>
    <!--扫码跳转点位-->
    <section class="section">
        <div>
            <mt-header title="详情" class="header">
                <span slot="left">
                    <mt-button icon="back" @click="$router.back()"></mt-button>
                </span>
                <span slot="right" @click="History">
                    历史记录
                </span>
            </mt-header>
        </div>
        <section class="content">
            <div class="con">
                <ul>
                    <li><span>责任单位:</span><span>{{detialData.deptName || '--'}}</span></li>
                    <li>
                        <span>平面图标记:</span>
                        <span>
                         <mu-flex>
                            <mu-switch class="demo-picker-form" v-model="display"></mu-switch>
                         </mu-flex>
                    </span>
                    </li>
                </ul>
                <ul>
                    <li>
                        <MapShow :width="'300px'" :height="'200px'" :url="mapurl" :pointList="pointList" :showIndex="display"></MapShow>
                    </li>
                </ul>
                <ul>
                    <li v-if="detialData.measureVo"><span>实测点数：</span><span>{{detialData.measureVo.pointNum || 0}}</span><span>实测次数：</span><span>{{detialData.measureVo.sumCount || 0}}</span></li>
                    <li v-if="detialData.measureVo"><span>合格次数：</span><span>{{detialData.measureVo.qualCount || 0}}</span><span>合格率：</span><span>{{detialData.measureVo.prop || 0}}%</span></li>
                    <li v-if="!detialData.measureVo"><span>暂无实测信息</span></li>
                </ul>
                <ul v-if="detialData.measureVo && detialData.measureVo.messageList" >
                    
                    <li v-for="(item,index) in  handPoint(detialData.point)" :key="index" style="display:block;">
                        <p style="width:100%;"><span>实测点位：</span><span>{{index+1}}</span><span> </span><span> </span></p>
                        <section class="table">
                            <table border="1" bordercolor="#D9D9D9" class="table">
                                <thead>
                                    <tr>
                                        <th>实测分项</th>
                                        <th>实测内容</th>
                                        <th>数值</th>
                                        <th>结果</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item,sql) in hanResult(index,(detialData.measureVo && detialData.measureVo.messageList)||[])" :key="sql">
                                        <td>{{item.subentryName}}</td>
                                        <td>{{item.content}}</td>
                                        <td>{{item.value}}</td>
                                        <td>{{item.result == 1?'合格':'不合格'}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </section>
                    </li>
                </ul>
                <ul v-else>
                    <li><span>暂无实测点位信息</span></li>
                </ul>
                <ul v-if="detialData.measureVo">
                    <li><span>参与人</span><span>{{detialData.measureVo.joinUserName || '--'}}</span></li>
                    <li><span>实测人</span><span>{{detialData.measureVo.createdUserName || '--'}}</span></li>
                    <li><span>实测时间</span><span>{{detialData.measureVo.createdTime || '--'}}</span></li>
                </ul>
                <ul v-if="detialData.measureVo">
                    <li style="display:block;">
                        <p>现场照片：</p>
                        <div class="imgshow">
                            <img :preview="index" :src="item" v-for="(item,index) in handImg(detialData.measureVo && detialData.measureVo.measureUrl)" :key="index"/>
                        </div>
                    </li>
                    <li><span>抄送人：</span><span>{{detialData.measureVo.copyUserName || '--'}}</span></li>
                </ul>
            </div>
        </section>
    </section>
</template>

<script>
    export default {
        name: "pointPosition",
        data () {
            return{
                display: true,
                mapurl:'',
                pointList:[],
                detialData:{}
            }
        },
        created () {
            let params = this.$A.GUP()
            if(params.id){
                sessionStorage.setItem('hisId',params.id)
                this.getDetail(params.id)
            }
        },
        methods:{
            History () {
                this.$router.push({
                    path:'./historicalRecord'
                })
            },
            handPoint(str = null){
                if(!str){
                    return []
                }else{
                    let arr = []
                    str = str.replace(/\'/g,'\"')
                    str = JSON.parse(str)
                    for(let i=str.length;i--;){
                    let point = str[i].split(',')
                    arr.push({left:point[0],top:point[1]})
                    }
                    return arr
                }
            },
            //获取详情
            getDetail(id){
                this.$A.Go('get','/safety/measureTask/detail',{id}).then(success=>{
                    if(success.code == 200){
                        this.detialData = success.body;
                        this.pointList = this.handPoint(success.body.point)
                        this.mapurl = success.body.photoUrl
                    }else{
                        this.$A.MS(success.msg,'error')
                    }
                    
                },function(err){
                    console.log(err)
                })
            },
            hanResult(index,data){
                let arr = [],list = this.handPoint(this.detialData.point)
                let str = list[index].left+','+list[index].top
                
                return data.filter(o=>o.point == str)
            },
            handImg(str=""){
                return str.split(",")
            },
        },
        beforeDestroy () {
            sessionStorage.removeItem('hisId')
        }
    }
</script>

<style scoped lang="scss">
.imgshow{
    img{
      width:100px;
      max-height:100px;
      margin:10px 15px;
    }
  }
    .section {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        .content {
            flex: 1;
            overflow: auto;
            padding: 0.1rem 0;
            .con {
                display: flex;
                flex-direction: column;
                padding: 0.1rem;
                .table {
                    width: 100%;
                    height: auto;
                    border: 0.01rem solid #6E6E6E;
                    font-size: 0.12rem;
                    line-height: 0.2rem;
                    .tr {
                        width: 100%;
                        border-bottom: 0.01rem solid #6E6E6E;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .td {
                            border-left: 1px solid #dedede;
                            width: 100%;
                            text-align: center;
                            .tr {
                                border-bottom: 1px solid #dedede;
                                border-left: none;
                            }
                            > .tr:last-child {
                                border: none;
                            }
                        }
                        > .td:first-child {
                            border: none;
                        }
                        .tr {
                            border-left: 1px solid #dedede;
                        }
                    }
                    > .tr:last-child {
                        border: none;
                    }
                    .header {
                        background-color: #ddd;
                        color: #000;
                    }
                    .subheader {
                        background-color: #eee;
                        color: #333;
                    }
                }
                ul {
                    background: white;
                    width: 100%;
                    height: 100%;
                    list-style: none;
                    padding: 0.12rem;
                    margin: 0.01rem 0;
                    overflow: hidden;
                    font-size: 0.12rem;
                    li {
                        display: flex;
                        justify-content: space-between;
                        padding: 0.1rem 0;
                    }
                }
            }
        }
    }
</style>
